<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .swiper-slide{
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
        }
        .swiper-slide:nth-child(1){
            background-color: blanchedalmond;
        }
        .swiper-slide:nth-child(2){
            background-color: goldenrod;
        }
        .swiper-slide:nth-child(3){
            background-color: rosybrown;
        }
        .swiper-slide:nth-child(4){
            background-color: royalblue;
        }
        .swiper-slide:nth-child(5){
            background-color: palevioletred;
        }
    </style>
</head>
<body>
    <div id="app">
        <h5>$nextTick</h5>
        <ol>
            <li> vm.$nextTick:等同于 nextTick ,将执行函数体延迟到页面DOM更新完成后执行</li>
            <li>数据仓库发生变化,触发的DOM更新是异步操作,所以DOM更新存在延迟</li>
            <li>一些特殊的三方工具包提供的功能,需要基于元素内部的构成进行功能实现,此时必须保证三方工具的执行晚于DOM的更新</li>
            <li>nextTick方法的延迟是基于该方法前面定义的变量赋值代码的运行时间决定</li>
            <li>vue3 nextTick 会返回一个 promise 对象,所以也可以使用promise规则进行延迟等待</li>
        </ol>
        <p ref="msgDom">msg:{{ msg }}</p>
        <input type="button" value="restMsg" @click="restMsg()">
        <hr>
        <div class="swiper-container" ref="loop">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in arr">slider{{ item }}</div>
            </div>
          </div>
        <input type="button" value="initLoop" @click="initLoop()">
    </div>
    <script src="../assets/swiper/js/swiper.min.js"></script>
    <script type="module">
        
        // 加载 Vue3 的ESM 模块文件
        import { createApp,nextTick } from "../assets/vue3/vue.esm-browser.js"
        // console.log(nextTick);

        createApp({
            data(){
                return {
                    msg:"msg变量",
                    arr:[]
                }
            },
            methods: {
                restMsg() {
                    console.log("msg变量修改前:",this.$refs.msgDom.textContent )
                   
                    this.msg=Math.random()
                    // console.log("msg变量修改后:",this.$refs.msgDom.textContent )
                    // setTimeout(() => {
                    //     console.log("msg变量修改后:",this.$refs.msgDom.textContent )
                    // }, 10);

                    // this.$nextTick(()=>{
                    //     console.log("msg变量修改后:",this.$refs.msgDom.textContent )
                    // })

                    nextTick(()=>{
                        console.log("msg变量修改后:",this.$refs.msgDom.textContent )
                    })

                },
                // initLoop() {
                //     this.arr = [1,2,3,4,5]
                //     // new Swiper(this.$refs.loop, {})
                //     let p = this.$nextTick(()=>{
                //         new Swiper(this.$refs.loop, {})
                //     })
                //     console.log(p)
                // }
                async initLoop() {
                    this.arr = [1,2,3,4,5]
                    await this.$nextTick()
                    new Swiper(this.$refs.loop, {})
                }
            },
        }).mount("#app")
    </script>
</body>
</html>